<template>
  <div class="head" style="border: 1px solid red;position: fixed;top: 0;left: 30%; width: 500px;">
  <div class="head-title">
    <el-page-header style="position: relative;left: 430px;" @back="goBack" content="">
    </el-page-header>
    <el-avatar :src=postDetailHead.avatar></el-avatar>
    <span>{{ postDetailHead.userName }}</span>
    <el-button v-if="postDetailHead.isSubscribed==0" type="primary" round style="margin-left: 340px;margin-top: 5px; " @click="subscribe(postDetailHead.userId)">关注</el-button>
    <el-button v-else round style="margin-left: 340px;margin-top: 5px;" @click="unSubscribe(postDetailHead.userId)">已关注</el-button> 
  </div>
  <div class="head-content" >
    <span></span>
    <span>{{ postDetailHead.content }}</span>
  </div>
  <div class="head-operations">
    <el-button type="primary" ><el-icon><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
              xmlns="http://www.w3.org/2000/svg" data-v-746b41f0="">
              <path
                d="M16.0001 30C15.7313 29.9983 15.4722 29.8968 15.2704 29.7142C13.8836 28.4502 10.4494 25.2135 7.935 22.8518L7.72707 22.6574L7.0135 21.9866C5.87916 20.922 4.80993 19.9165 4.42898 19.5626C4.35053 19.4877 4.2684 19.4139 4.1682 19.3273C3.17609 18.4523 2.37941 17.3673 1.8327 16.1463C1.286 14.9254 1.0021 13.5974 1.00051 12.2532C0.987516 10.9904 1.22282 9.73791 1.69239 8.5711C2.13749 7.45328 2.7925 6.43677 3.61987 5.57951C4.38515 4.76751 5.3005 4.12089 6.31215 3.67793C7.3238 3.23497 8.41128 3.00451 9.51077 3C10.7584 3.00603 11.9888 3.3 13.1114 3.85999C14.234 4.41999 15.2202 5.23186 15.9973 6.23584C16.7743 5.23199 17.7603 4.41998 18.8828 3.85999C20.0052 3.30001 21.2355 3.00618 22.4829 3C23.5808 3.00297 24.6669 3.23109 25.6781 3.67081C26.6893 4.11053 27.6051 4.75305 28.372 5.56099C29.1962 6.41583 29.8499 7.4281 30.2965 8.54095C30.7666 9.70799 31.0058 10.9598 30.9999 12.223C31.0045 13.5845 30.7185 14.9303 30.1622 16.1658C29.6059 17.4012 28.7928 18.4962 27.7803 19.3731C26.6374 20.4261 24.8253 22.1285 22.9064 23.9321L22.8563 23.9798L22.0442 24.7429C19.9325 26.7283 17.7517 28.7798 16.7298 29.7151C16.5291 29.8995 16.2692 30.001 16.0001 30V30ZM9.51354 5.31508C8.71021 5.321 7.91618 5.49157 7.17781 5.81712C6.43944 6.14267 5.77174 6.61662 5.21364 7.21096C4.59234 7.85539 4.10031 8.61918 3.76549 9.45886C3.41406 10.34 3.23697 11.2842 3.24462 12.2366C3.24428 13.2474 3.45594 14.2464 3.86542 15.1653C4.2749 16.0841 4.87257 16.9013 5.61727 17.5608C5.69384 17.6259 5.76384 17.6891 5.8319 17.7552L5.8469 17.7678L5.85913 17.7785C5.88101 17.8017 5.90404 17.8239 5.92813 17.8447C6.29679 18.184 7.25168 19.0793 8.6885 20.4337L10.0741 21.7347C12.1887 23.7211 14.5462 25.9359 16.001 27.2854C17.0125 26.3423 18.4863 24.9608 20.5035 23.06C23.1125 20.6021 25.1126 18.7285 26.2885 17.6434L26.3414 17.5948C27.0784 16.9531 27.6746 16.1578 28.0902 15.2614C28.5276 14.3069 28.7535 13.2644 28.7519 12.2093C28.7541 11.2556 28.5739 10.3109 28.2215 9.42872C27.8874 8.59351 27.3974 7.83373 26.7792 7.19245C26.2197 6.60072 25.5512 6.12978 24.8127 5.80691C24.0742 5.48405 23.2805 5.31566 22.4781 5.31199C21.5352 5.31876 20.6067 5.54999 19.7653 5.98755C18.9238 6.42511 18.1923 7.05711 17.628 7.83406C17.4367 8.0897 17.191 8.297 16.9098 8.44007C16.6287 8.58313 16.3195 8.65829 16.0059 8.65963H15.9955C15.6799 8.6587 15.3686 8.5838 15.0853 8.44078C14.8019 8.29776 14.554 8.09027 14.3602 7.83406C13.7958 7.05833 13.0645 6.4274 12.2238 5.9904C11.3831 5.5534 10.4555 5.32233 9.51354 5.31508V5.31508Z"
                fill="white"></path>
            </svg></el-icon>{{postDetailHead.likes}}</el-button>
            

        <el-button type="primary" ><el-icon>
            <Comment />
          </el-icon >{{ postDetailHead.replyNum }}</el-button>
  </div>
  </div>
  <div v-for="(floor,index) in postDetailContents" :key="index" class="content" >
    <div class="content-floor">
      <div class="content-floor-head">
        <el-avatar :src=floor.avatar></el-avatar>
        <span>{{floor.userName}}:<el-link type="" @click="makeReply(index,0)" target="_blank">{{floor.content}}</el-link></span>
        <el-button :key=likeCommentFlash type="primary" @click="likeComment(floor.commentId,index)"><el-icon><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
              xmlns="http://www.w3.org/2000/svg" data-v-746b41f0="">
              <path
                d="M16.0001 30C15.7313 29.9983 15.4722 29.8968 15.2704 29.7142C13.8836 28.4502 10.4494 25.2135 7.935 22.8518L7.72707 22.6574L7.0135 21.9866C5.87916 20.922 4.80993 19.9165 4.42898 19.5626C4.35053 19.4877 4.2684 19.4139 4.1682 19.3273C3.17609 18.4523 2.37941 17.3673 1.8327 16.1463C1.286 14.9254 1.0021 13.5974 1.00051 12.2532C0.987516 10.9904 1.22282 9.73791 1.69239 8.5711C2.13749 7.45328 2.7925 6.43677 3.61987 5.57951C4.38515 4.76751 5.3005 4.12089 6.31215 3.67793C7.3238 3.23497 8.41128 3.00451 9.51077 3C10.7584 3.00603 11.9888 3.3 13.1114 3.85999C14.234 4.41999 15.2202 5.23186 15.9973 6.23584C16.7743 5.23199 17.7603 4.41998 18.8828 3.85999C20.0052 3.30001 21.2355 3.00618 22.4829 3C23.5808 3.00297 24.6669 3.23109 25.6781 3.67081C26.6893 4.11053 27.6051 4.75305 28.372 5.56099C29.1962 6.41583 29.8499 7.4281 30.2965 8.54095C30.7666 9.70799 31.0058 10.9598 30.9999 12.223C31.0045 13.5845 30.7185 14.9303 30.1622 16.1658C29.6059 17.4012 28.7928 18.4962 27.7803 19.3731C26.6374 20.4261 24.8253 22.1285 22.9064 23.9321L22.8563 23.9798L22.0442 24.7429C19.9325 26.7283 17.7517 28.7798 16.7298 29.7151C16.5291 29.8995 16.2692 30.001 16.0001 30V30ZM9.51354 5.31508C8.71021 5.321 7.91618 5.49157 7.17781 5.81712C6.43944 6.14267 5.77174 6.61662 5.21364 7.21096C4.59234 7.85539 4.10031 8.61918 3.76549 9.45886C3.41406 10.34 3.23697 11.2842 3.24462 12.2366C3.24428 13.2474 3.45594 14.2464 3.86542 15.1653C4.2749 16.0841 4.87257 16.9013 5.61727 17.5608C5.69384 17.6259 5.76384 17.6891 5.8319 17.7552L5.8469 17.7678L5.85913 17.7785C5.88101 17.8017 5.90404 17.8239 5.92813 17.8447C6.29679 18.184 7.25168 19.0793 8.6885 20.4337L10.0741 21.7347C12.1887 23.7211 14.5462 25.9359 16.001 27.2854C17.0125 26.3423 18.4863 24.9608 20.5035 23.06C23.1125 20.6021 25.1126 18.7285 26.2885 17.6434L26.3414 17.5948C27.0784 16.9531 27.6746 16.1578 28.0902 15.2614C28.5276 14.3069 28.7535 13.2644 28.7519 12.2093C28.7541 11.2556 28.5739 10.3109 28.2215 9.42872C27.8874 8.59351 27.3974 7.83373 26.7792 7.19245C26.2197 6.60072 25.5512 6.12978 24.8127 5.80691C24.0742 5.48405 23.2805 5.31566 22.4781 5.31199C21.5352 5.31876 20.6067 5.54999 19.7653 5.98755C18.9238 6.42511 18.1923 7.05711 17.628 7.83406C17.4367 8.0897 17.191 8.297 16.9098 8.44007C16.6287 8.58313 16.3195 8.65829 16.0059 8.65963H15.9955C15.6799 8.6587 15.3686 8.5838 15.0853 8.44078C14.8019 8.29776 14.554 8.09027 14.3602 7.83406C13.7958 7.05833 13.0645 6.4274 12.2238 5.9904C11.3831 5.5534 10.4555 5.32233 9.51354 5.31508V5.31508Z"
                fill="white"></path>
            </svg></el-icon>{{floor.likes}}</el-button>
      </div>
      <div  class="content-floor-replies">
        <div v-for="(reply,index2) in floor.replies" :key="index2" class="content-floor-reply">
          <el-avatar :src=reply.avatar></el-avatar>
        <span>{{reply.userName}}:<el-link type="" @click="makeReply(index,1,index2)" target="_blank">{{reply.content}}</el-link></span>
        <el-button :key="likeReplyFlash" type="primary" @click="likeReply(reply.replyId,index,index2)"><el-icon><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
              xmlns="http://www.w3.org/2000/svg" data-v-746b41f0="">
              <path
                d="M16.0001 30C15.7313 29.9983 15.4722 29.8968 15.2704 29.7142C13.8836 28.4502 10.4494 25.2135 7.935 22.8518L7.72707 22.6574L7.0135 21.9866C5.87916 20.922 4.80993 19.9165 4.42898 19.5626C4.35053 19.4877 4.2684 19.4139 4.1682 19.3273C3.17609 18.4523 2.37941 17.3673 1.8327 16.1463C1.286 14.9254 1.0021 13.5974 1.00051 12.2532C0.987516 10.9904 1.22282 9.73791 1.69239 8.5711C2.13749 7.45328 2.7925 6.43677 3.61987 5.57951C4.38515 4.76751 5.3005 4.12089 6.31215 3.67793C7.3238 3.23497 8.41128 3.00451 9.51077 3C10.7584 3.00603 11.9888 3.3 13.1114 3.85999C14.234 4.41999 15.2202 5.23186 15.9973 6.23584C16.7743 5.23199 17.7603 4.41998 18.8828 3.85999C20.0052 3.30001 21.2355 3.00618 22.4829 3C23.5808 3.00297 24.6669 3.23109 25.6781 3.67081C26.6893 4.11053 27.6051 4.75305 28.372 5.56099C29.1962 6.41583 29.8499 7.4281 30.2965 8.54095C30.7666 9.70799 31.0058 10.9598 30.9999 12.223C31.0045 13.5845 30.7185 14.9303 30.1622 16.1658C29.6059 17.4012 28.7928 18.4962 27.7803 19.3731C26.6374 20.4261 24.8253 22.1285 22.9064 23.9321L22.8563 23.9798L22.0442 24.7429C19.9325 26.7283 17.7517 28.7798 16.7298 29.7151C16.5291 29.8995 16.2692 30.001 16.0001 30V30ZM9.51354 5.31508C8.71021 5.321 7.91618 5.49157 7.17781 5.81712C6.43944 6.14267 5.77174 6.61662 5.21364 7.21096C4.59234 7.85539 4.10031 8.61918 3.76549 9.45886C3.41406 10.34 3.23697 11.2842 3.24462 12.2366C3.24428 13.2474 3.45594 14.2464 3.86542 15.1653C4.2749 16.0841 4.87257 16.9013 5.61727 17.5608C5.69384 17.6259 5.76384 17.6891 5.8319 17.7552L5.8469 17.7678L5.85913 17.7785C5.88101 17.8017 5.90404 17.8239 5.92813 17.8447C6.29679 18.184 7.25168 19.0793 8.6885 20.4337L10.0741 21.7347C12.1887 23.7211 14.5462 25.9359 16.001 27.2854C17.0125 26.3423 18.4863 24.9608 20.5035 23.06C23.1125 20.6021 25.1126 18.7285 26.2885 17.6434L26.3414 17.5948C27.0784 16.9531 27.6746 16.1578 28.0902 15.2614C28.5276 14.3069 28.7535 13.2644 28.7519 12.2093C28.7541 11.2556 28.5739 10.3109 28.2215 9.42872C27.8874 8.59351 27.3974 7.83373 26.7792 7.19245C26.2197 6.60072 25.5512 6.12978 24.8127 5.80691C24.0742 5.48405 23.2805 5.31566 22.4781 5.31199C21.5352 5.31876 20.6067 5.54999 19.7653 5.98755C18.9238 6.42511 18.1923 7.05711 17.628 7.83406C17.4367 8.0897 17.191 8.297 16.9098 8.44007C16.6287 8.58313 16.3195 8.65829 16.0059 8.65963H15.9955C15.6799 8.6587 15.3686 8.5838 15.0853 8.44078C14.8019 8.29776 14.554 8.09027 14.3602 7.83406C13.7958 7.05833 13.0645 6.4274 12.2238 5.9904C11.3831 5.5534 10.4555 5.32233 9.51354 5.31508V5.31508Z"
                fill="white"></path>
            </svg></el-icon>{{reply.likes}}</el-button>
        </div>
      </div>
    </div>
  </div>
  <div class="footer" style="position: fixed;bottom: 0;left: 35%; width: 400px;">
    <el-form>
      <el-form-item>
        <el-input type="textarea" v-model="form.content" placeholder="留下你的足迹...">
        </el-input>
      </el-form-item>
      <el-button style="position: relative; right: -185px;bottom: 45px " type="success" icon="el-icon-check" circle @click="makeComment">√</el-button>
    </el-form>
  </div> 
</template>


<script lang="ts" setup>

import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { onMounted, reactive, ref, toRef } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'
import {  ElMessageBox } from 'element-plus'

const route=useRoute()
const router=useRouter()
let likeCommentFlash=ref(0)
let likeReplyFlash=ref(0)

let postDetailHead=reactive<PostDetailHead>({
  avatar:'',
  content:'',
  createTime:0,
  likes:0,
  picture:'',
  postId: 0, 
  userId: 0,  
  userName:'',
  replyNum:0,
  isSubscribed:0
})
let postDetailContents:PostDetailContent[]=reactive([])

interface PostDetailHead{
  avatar:string;
  content:string;
  createTime:number;
  likes:number;
  picture:string;
  postId: number;  
  userId: number;  
  userName:string;
  replyNum:number;
  isSubscribed:number
}

interface Reply{
  avatar:string;
  content:string;
  createTime:number;
  likes:number; 
  userId: number;  
  userName:string;
  replyId:number;
}

interface PostDetailContent{
  commentId:number;
  content:string;
  createTime:number;
  likes:number;
  userId:number
  avatar:string;
  userName:string;
  replies:Array<Reply>
}

const form = reactive({
  content:''
    })

onMounted(()=>{
    console.log('当前帖子id',route.query.postId)
  axios.get('http://localhost:8080/ODP_Project/community/postDetailHead/'+route.query.postId).then(
    response=>{
    Object.assign(postDetailHead,response.data.data)  //失去响应式
    console.log('Head:',postDetailHead) 
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )
  axios.get('http://localhost:8080/ODP_Project/community/postDetailContent/'+route.query.postId).then(
    response=>{
      Object.assign(postDetailContents,response.data.data)
      //alert(postDetailContents[0].replies[0].avatar)
      console.log('content',postDetailContents)
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )

})


//点击关注
function subscribe(userId:number){
  axios.put('http://localhost:8080/ODP_Project/community//subscribe/'+userId).then(
    response=>{
      console.log(response.data.msg)
      postDetailHead.isSubscribed=1
      ElMessage({
    message: '关注成功.',
    type: 'success',
  })
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//取关
function unSubscribe(userId:number){
  axios.delete('http://localhost:8080/ODP_Project/community/unSubscribe/'+userId).then(
    response=>{
      console.log(response.data.msg)
      postDetailHead.isSubscribed=0
      ElMessage({
    message: '取关成功.',
    type: 'success',
  })
    }
    
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//点赞楼主
function likeComment(commentId:number,index:number){
  axios.put('http://localhost:8080/ODP_Project/community/like/comment/'+commentId).then(
    response=>{
      console.log(response.data.msg)
      postDetailContents[index].likes++
      likeCommentFlash.value++;
      ElMessage({
    message: '点赞成功.',
    type: 'success',
     })
    },
    
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//点赞回复
function likeReply(replyId:number,index:number,index2:number){
  axios.put('http://localhost:8080/ODP_Project/community/like/reply/'+replyId).then(
    response=>{
      console.log(response.data.msg)
      postDetailContents[index].replies[index2].likes++
      likeReplyFlash.value++;
      ElMessage({
    message: '点赞成功.',
    type: 'success',
     })
    },
    
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//发表评论
function makeComment(){
  const comment={
        postId:postDetailHead.postId,
        content:form.content,
      }
  axios.post('http://localhost:8080/ODP_Project/community/comment',comment).then(
    response=>{
      ElMessage({
    message: '评论成功.',
    type: 'success',
     })
     router.push({
      path:'post',//不要 /post
      query:
      {
        postId:postDetailHead.postId,
      }})
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//回复
//0表示回复楼主 1表示回复楼中楼里的人
const makeReply = (index:number,flag:number,index2?:any) => {
  ElMessageBox.prompt(flag===0?'回复 '+postDetailContents[index].userName:'回复 '+postDetailContents[index].replies[index2].userName, '', {
  })
    .then(({ value }) => {

      let reply={
        postId:-1,
        commentId:-1,
        replyedId:-1,
        content:''
      }

      if(flag===0){
        //回复楼主
        reply={
          postId:postDetailHead.postId,
          commentId:postDetailContents[index].commentId,
          replyedId:postDetailContents[index].userId,//被回复的人的id是楼主的id
          content:value
        }
      }
        else{
          //回复回复
          reply={
          postId:postDetailHead.postId,
          commentId:postDetailContents[index].commentId,
          replyedId:postDetailContents[index].replies[index2].userId,//被回复的人的id是楼主的id
          content:"回复"+postDetailContents[index].replies[index2].userName+":"+value
        }
        }
      console.log('dadw',reply)



    axios.post('http://localhost:8080/ODP_Project/community/reply',reply).then(
    response=>{
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )
      ElMessage({
        type: 'success',
        message: `回复成功，审核后发布.`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消回复',
      })
    })
}

function goBack(){
  router.push({
      path:'community',//不要 /
      })
}
</script>

<style scoped>
.contnt{
  border: 1px solid red;
}
.content-floor-replies{
  border: 1px solid red;
}
</style>